<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
            }
            
            body {
                background: #eee;
            }
            
            h1 {
                margin: 10px 20px;
            }
            
            #wrapper {
                margin: auto;
                position: absolute;
                width: 520px;
                height: 490px;
                
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: white;
                box-shadow: 0px 0px 8px 0px #aaa, 0px 0px 8px 0px #aaa, 0px 0px 16px 0px #aaa;
            }
            
            /**
             *     スライダ
             */
            ul#slider {
                margin: 20px auto;
                position: relative;
                width: 480px;
                height: 360px;
                
                list-style: none;
            }
            ul#slider li {
                -webkit-transition: 1s;
                -moz-transition: 1s;
                -o-transition: 1s;
                transition: 1s;
                position: absolute;
            }
            ul#slider.normal li:not(:target) {
                opacity: 0.0;
            }
            ul#slider.normal li:target {
            }
            
            /**
             *     サムネイル
             */
            ul#thumb {
                margin: auto;
                padding: 20px;
                width: 520px;
                display: -webkit-box;
                display: -moz-box;
                display: -o-box;
                display: box;
                box-shadow: inset 0px 0px 8px 0px #fff;
                
                background-color: black;
                
                list-style: none;
                overflow-x: auto;
            }
            ul#thumb li {
                -webkit-transition: 0.5s;
                -moz-transition: 0.5s;
                -o-transition: 0.5s;
                transition: 0.5s;
                margin: 0px 10px;
            }
            ul#thumb li img {
                border: 1px solid #aaa;
            }
            ul#thumb li:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -o-transform: scale(1.5);
                transform: scale(1.5);
                opacity: 0.75;
                z-index: 0;
            }
            ul#thumb li:not(:hover) {
                z-index: auto;
            }
        </style>
    </head>
    
    <body>
        <h1>Image Gallery</h1>
        <div id="wrapper">
            <ul id="slider" class="normal">
                <li id="0">
                    <img src="img/IMG_0061.jpg" width="480" height="360" />
                </li>
                <li id="1">
                    <img src="img/IMG_0066.jpg" width="480" height="360" />
                </li>
                <li id="2">
                    <img src="img/IMG_0071.jpg" width="480" height="360" />
                </li>
                <li id="3">
                    <img src="img/IMG_0101.jpg" width="480" height="360" />
                </li>
            </ul>
            <ul id="thumb">
                <li>
                    <a href="#0">
                        <img src="img/IMG_0061.jpg" width="50" height="50" />
                    </a>
                </li>
                <li>
                    <a href="#1">
                        <img src="img/IMG_0066.jpg" width="50" height="50" />
                    </a>
                </li>
                <li>
                    <a href="#2">
                        <img src="img/IMG_0071.jpg" width="50" height="50" />
                    </a>
                </li>
                <li>
                    <a href="#3">
                        <img src="img/IMG_0101.jpg" width="50" height="50" />
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>